<template>
  <el-form-item class="release-form-item"
    label="报名填写项"
    prop="trainSignFiled"
    :rules="[
      { required: !1, message: '报名填写项'}
    ]">
    <el-row>
      <el-checkbox-group v-model="defautEditVal">
        <el-col :span="8" v-for="(item, index) in defaultItems" :key="item.fieldName">
          <el-checkbox
            :label="item.fieldName"
            :disabled="!0">
            <span class="checkbox-text">{{item.fieldText}}</span>
          </el-checkbox>
        </el-col>
      </el-checkbox-group>
    </el-row>
    <el-row>
      <el-checkbox-group v-model="customEditVal" @change="handleCheckChange">
        <el-col :span="8" v-for="(item, index) in customItems" :key="item.fieldName">
          <el-checkbox
            :disabled="serviceType.trainEditState"
            :label="item">
            <span class="checkbox-text">{{item.fieldText}}</span>
          </el-checkbox>
        </el-col>
      </el-checkbox-group>
      <!-- <el-col :span="6">
        <el-checkbox-group v-model="defautEditVal">
          <el-checkbox
            v-for="(item, index) in defaultItems"
            :label="item.fieldName"
            :disabled="!0"
            :key="item.fieldName">
            <span class="checkbox-text">{{item.fieldText}}</span>
          </el-checkbox>
        </el-checkbox-group>
      </el-col>
      <el-col :span="6">
        <el-checkbox-group v-model="customEditVal" @change="handleCheckChange">
          <el-checkbox
            v-for="(item, index) in customItems"
            :disabled="serviceType.trainEditState"
            :label="item"
            :key="item.fieldName">
            <span class="checkbox-text">{{item.fieldText}}</span>
            <el-radio-group v-model="item.isNeed" @change="handleCheckChange(customEditVal)">
              <el-radio
                v-for="child in item.child"
                :key="child.name"
                :disabled="serviceType.trainEditState"
                :label="child.name">{{child.label}}</el-radio>
            </el-radio-group>
          </el-checkbox>
        </el-checkbox-group> -->
      </el-col>
    </el-row>
  </el-form-item>
</template>
<script>
  import {
    TRAIN_CUSTOM_SIGN_ITEMS,
    TRAIN_DEFAULT_SIGN_ITEMS
  } from '../constant'

  import { mapGetters } from 'vuex'
  export default {
    props: {
      value: {
        type: Object
      }
    },
    computed: {
      ...mapGetters({
        'serviceType': 'service_release_type' // 类目类型 区分 赛事 培训 票务等
      }),
      editorValue () {
        return this.value
      }
    },
    watch: {
      value (newVal) {
        // 为{}初始化值时，执行初始化
        // 此修改为了适应切换类目导致数据不能初始化
        if (!newVal.name) {
          this.handleInput()
        }
      }
    },
    mounted () {
      if (this.value.values) {
        let editorVal = this.value.values.map(item => {
          let customItem = this.customItems.find(k => k.fieldName === item.fieldName)
          if (customItem) {
            customItem.isNeed = item.isNeed
            return customItem
          }
        })
        this.customEditVal = editorVal
        this.handleCheckChange(this.customEditVal)
      } else {
        this.handleInput()
      }
    },
    data () {
      let defaultItems = TRAIN_DEFAULT_SIGN_ITEMS
      let customItems = TRAIN_CUSTOM_SIGN_ITEMS
      let defautEditVal = []
      let defaultSubVal = []
      defaultItems.forEach(item => {
        defautEditVal.push(item.fieldName) // 选中变量
        // defaultSubVal.push(item)
      })
      return {
        defaultItems,
        customItems,
        defautEditVal,
        defaultSubVal,
        customEditVal: []
      }
    },
    methods: {
      handleCheckChange (newVal) {
        this.handleInput(newVal)
      },
      handleInput (values = []) {
        let combineArr = []
        let customArr = !values.length && this.customEditVal.length ? this.customEditVal : values
        // combineArr = Object.assign([], this.defaultSubVal) // 必填项  不用传
        customArr.forEach(item => {
          let {fieldName, fieldText, isNeed} = item
          combineArr.push({
            fieldName,
            fieldText,
            isNeed
          })
        })
        let newVal = {
          name: 'signupFields',
          nameText: '报名填写项',
          values: [JSON.stringify(combineArr)],
          valueTexts: []
        }
        // 触发input事件
        this.$timer && clearTimeout(this.$timer)
        this.$timer = setTimeout(_ => {
          this.$emit('input', newVal).$emit('change', newVal)
        }, 500)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .checkbox-text{
    display: inline-block;
    width:140px;
  }
</style>
